{include file="my/header"}
<style>
    .layui-laydate-list > li {
        position: relative;
        width: 50%;
        height: 36px;
        line-height: 36px;
        margin: 3px 0;
        text-align: center;
        cursor: pointer;
    }

    .layui-laydate-list li:last-child {
        display: none;
    }
</style>

<div class="container-fluid">
    <div class="layui-card">
        <div class="layui-card-body">
            <div class="layui-tab layui-tab-card" lay-filter="demo">
                {if condition="session('userclass') eq 2 or session('userclass') eq 5 "}
                <ul class="layui-tab-title J-tab">
                    <li class="layui-this">监考管理</li>
                    <li>考试课程</li>
                    <li>监考老师</li>
                    <li>考试课室</li>
                </ul>
                {/if}

                <div class="layui-tab-content">
                    <div class="layui-tab-item layui-show J-layui-show">
                        <!-- 表格数据查询块 -->
                        <div class="table-query">
                            <form class="layui-form layui-inline J-search-form" action="">
                                <div class="layui-inline">
                                    <label class="layui-form-label">搜索ID：</label>
                                    <div class="layui-inline">
                                        <input class="layui-input J-query-params" name="id" autocomplete="off" placeholder="请输入id" />
                                    </div>
                                </div>
                                <div class="layui-inline">
                                    <label class="layui-form-label">老师姓名:</label>
                                    <div class="layui-inline">
                                        <input class="layui-input J-query-params" name="teachername" autocomplete="off" placeholder="请输入课老师姓名" />
                                    </div>
                                </div>

                                <div class="layui-inline">
                                    <label class="layui-form-label">考试任务:</label>
                                    <div class="layui-inline">
                                        <input class="layui-input J-query-params" name="name" autocomplete="off" placeholder="请输入考试任务" />
                                    </div>
                                </div>
                                <div class="layui-inline">
                                    <label class="layui-form-label">考试课程:</label>
                                    <div class="layui-input-block">
                                        <input class="layui-input J-query-params" name="coursename" autocomplete="off" placeholder="请输入考试任务" />
                                    </div>
                                </div>
                                <div class="layui-inline">
                                    <label class="layui-form-label">考试时间:</label>
                                    <div class="layui-inline">
                                        <input type="text" class="layui-input J-query-params J-date" name="task_date" placeholder="yyyy-MM-dd" />
                                    </div>
                                </div>
                            </form>
                            <button class="layui-btn J-search" data-type="reload">搜索</button>
                            <button class="layui-btn J-reload">重置</button>
                        </div>
                        <!-- 表格 -->
                        <table class="layui-hide" id="testTable" lay-filter="test4"></table>
                        <!-- 表格工具 -->
                        <script type="text/html" id="toolbarResult">
                            <div class="layui-btn-container">
                                {if condition="session('userclass') eq 2 or session('userclass') eq 5 "}
                                <!-- <button class="layui-btn layui-btn-sm" lay-event="add">排监考</button> -->
                                <button class="layui-btn layui-btn-sm" lay-event="batchdel">批量删除</button>
                                {/if} {if condition="session('userclass') eq 3 or session('userclass') eq 5 "}
                                <button class="layui-btn layui-btn-sm" lay-event="changeResult">申请调换监考</button>
                                {/if} {/if} {if condition="session('userclass') eq 3 or session('userclass') eq 5 "}
                                <button class="layui-btn layui-btn-sm" lay-event="apply">申请监考</button>
                                {/if}
                            </div>
                        </script>
                        <script type="text/html" id="barResult">
                            {if condition="session('userclass') eq 2 or session('userclass') eq 5 "}

                            <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
                            <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
                            {/if}
                        </script>
                    </div>
                    {if condition="session('userclass') eq 2 or session('userclass') eq 5 "}
                    <div class="layui-tab-item">{include file="test/components/courselisttemp"}</div>
                    <div class="layui-tab-item">{include file="test/components/teacherlisttemp"}</div>
                    <div class="layui-tab-item">{include file="test/components/classlisttemp"}</div>
                    {/if}
                </div>
            </div>
        </div>
        <!-- 弹出框模板 -->
        <div class="margin-top30 J-temple is-hidden">
            <form class="layui-form layui-fluid J-add-form" lay-filter="formTest">
                <input type="hidden" class="form-control" name="id" value="" placeholder="请输入内容" />
                <input type="hidden" class="form-control" name="schoolid" value="985" placeholder="请输入内容" />

                <div class="layui-form-item">
                    <label class="layui-form-label">考试日期</label>
                    <div class="layui-input-block">
                        <input type="text" placeholder="请选择考试日期" autocomplete="off" readonly class="layui-input" id="taskDate" name="task_date" />
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">考试时间</label>
                    <div class="layui-input-block">
                        <input type="text" class="layui-input form-control-range" placeholder="开始时间" id="beginTime" name="begin_time" />
                        <p class="col-sm-2 time-signal">~</p>
                        <input type="text" class="layui-input form-control-range" placeholder="结束时间" id="endTime" name="end_time" />
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">教师</label>
                    <div class="layui-input-block">
                        <select name="teacherid" id="teacherid">
                            <option value="">请选择</option>
                            {volist name='teacherinfodata' id='teacherdata'}
                            <option value="{$teacherdata.passteacherid}">{$teacherdata.teachername}</option>
                            {/volist}
                        </select>
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">考试任务</label>
                    <div class="layui-input-block">
                        <select name="taskid" id="taskid">
                            <option value="">请选择</option>
                            {volist name='taskdata' id='taskdata'}
                            <option value="{$taskdata.id}">{$taskdata.name}</option>
                            {/volist}
                        </select>
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">课程</label>

                    <div class="layui-input-block">
                        <select name="kechengid" id="kechengid">
                            <option value="">请选择一个课程</option>
                            {volist name='kechengdata' id='kechengdata'}
                            <option value="{$kechengdata.kechengid}">{$kechengdata.coursename}</option>
                            {/volist}
                        </select>
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">教师角色</label>
                    <div class="layui-input-block">
                        <select name="role" id="role" lay-filter="role">
                            <option value="0">监考</option>
                            <option value="1">巡考</option>
                        </select>
                    </div>
                </div>

                <div class="layui-form-item J-invigilate">
                    <label class="layui-form-label">考试教室</label>

                    <div class="layui-input-block">
                        <select name="roomid" id="roomid">
                            <option value="">请选择考试教室</option>
                            {volist name='classroom' id='data'}
                            <option value="{$data.id}">{$data.roomname}</option>
                            {/volist}
                        </select>
                    </div>
                </div>

                <div class="layui-form-item J-patrol-test">
                    <label class="layui-form-label">巡考地点</label>
                    <div class="layui-input-block">
                        <input type="text" autocomplete="off" class="layui-input" name="address" id="address" placeholder="请输入内容" />
                    </div>
                </div>

                <div class="layui-form-item J-invigilate">
                    <label class="layui-form-label">领卷地点</label>
                    <div class="layui-input-block">
                        <input type="text" autocomplete="off" class="layui-input" name="location" id="location" placeholder="请输入内容" />
                    </div>
                </div>
            </form>
        </div>
        <!-- 申请调监考模板 -->
        <div class="margin-top30 J-change-test is-hidden">
            <form class="layui-form layui-fluid J-change-form" lay-filter="formTest">
                <input type="hidden" class="form-control" name="id" value="" placeholder="请输入内容" />
                <input type="hidden" class="form-control" id="schoolid" name="schoolid" value="985" placeholder="请输入内容" />

                <div class="layui-form-item">
                    <label class="layui-form-label">考试任务</label>
                    <div class="layui-input-block">
                        <select name="taskid">
                            {volist name='taskdata2' id='tasklist'}
                            <option value="{$taskdata.id}">{$taskdata.name}</option>
                            {/volist}
                        </select>
                    </div>
                </div>

                <div class="layui-form-item J-is-apply">
                    <label class="layui-form-label">监考记录</label>
                    <div class="layui-input-block">
                        <select name="resultid" id="resultid">
                            <option value="">请选择</option>
                            {volist name='dblistdata' id='data'}
                            <option value="{$data.id}">{$data.coursename}\{$data.teachername}\{$data.roomname}\{switch $data.role}{case 1}副监考{/case}{case 2}巡考{/case}{default /}主监考{/switch}</option>
                            {/volist}
                        </select>
                    </div>
                </div>

                <div class="layui-form-item J-is-apply">
                    <label class="layui-form-label">申请教师</label>
                    <div class="layui-input-block">
                        <select name="teacherid">
                            <option value="">请选择</option>
                            {volist name='teacherinfodata' id='teacherdata'}
                            <option value="{$teacherdata.teacherid}">{$teacherdata.teachername}</option>
                            {/volist}
                        </select>
                    </div>
                </div>

                <div class="layui-form-item J-is-apply">
                    <label class="layui-form-label">换新老师</label>
                    <div class="layui-input-block">
                        <select name="newteacherid" id="newteacherid">
                            <option value="">请选择</option>
                            {volist name='teacherinfodata' id='teacherdata'}
                            <option value="{$teacherdata.teacherid}">{$teacherdata.teachername}</option>
                            {/volist}
                        </select>
                    </div>
                </div>

                <div class="layui-form-item J-is-demo">
                    <label class="layui-form-label">申请理由</label>
                    <div class="layui-input-block">
                        <textarea name="demo" id="demo" placeholder="请输入内容" class="layui-textarea"></textarea>
                    </div>
                </div>
            </form>
        </div>
    </div>

    <script>
        $(function () {
            // initCourseTable()
            initClass('/resultlist');
            layuiDate('.J-date');
            initTable();

            if ($('.J-tab').length) {
                initCourseTable();
                initTeacherTable();
                initClassTable();
                setTimeout(() => {
                    listTabChange();
                }, 500);
            } else {
                $('.J-layui-show').show();
            }
        });

        function listTabChange() {
            element.on('tab(demo)', function (data) {
                var index = data.index;
                index == 0 && initTable();
                index == 1 && initCourseTable();
                index == 2 && initTeacherTable();
                index == 3 && initClassTable();
            });
        }

        // 监听老师监考角色
        function listenRole() {
            form.on('select(role)', function (data) {
                if (data.value == 1) {
                    $('.J-patrol-test').show();
                    $('.J-invigilate').hide();
                } else {
                    $('.J-patrol-test').hide();
                    $('.J-invigilate').show();
                }
            });
        }

        function initDate() {
            layuiDate('#beginTime', 'time');
            layuiDate('#endTime', 'time');
            layuiDate('#taskDate');
        }

        function initTable() {
            var table4;
            var isHide = $('#noOperate').text() == '查看考试安排';

            // 请求路径
            var requireUrl = {
                add: "{:url('test/resultadd')}",
                edit: "{:url('test/resultedit')}",
                remove: "{:url('test/resultremove')}",
                list: "{:url('test/getresultlist')}",
            };

            layui.use('table', function () {
                table4 = layui.table;
                table4.render({
                    elem: '#testTable',
                    url: requireUrl.list,
                    toolbar: '#toolbarResult',
                    title: '老师列表',
                    totalRow: false,
                    cols: [
                        [
                            { type: 'checkbox', fixed: 'left' },
                            { field: 'id', title: '序号', minWidth: 100 },
                            { field: 'task_date', title: '考试日期', minWidth: 200 },
                            { field: 'begin_time', title: '开始时间', minWidth: 100 },
                            { field: 'end_time', title: '结束时间', minWidth: 100 },
                            { field: 'name', title: '考试任务', minWidth: 200 },
                            { field: 'coursename', title: '课程', minWidth: 100 },
                            { field: 'teachername', title: '老师', minWidth: 100 },
                            { field: 'roomname', title: '教室', minWidth: 100 },
                            { field: 'role', title: '老师角色', minWidth: 100 },
                            { field: 'class_name', title: '班级', minWidth: 100 },
                            { field: 'address', title: '巡考地点', minWidth: 100 },
                            { field: 'location', title: '领劵地点', minWidth: 100 },
                            { fixed: 'right', title: '操作', toolbar: '#barResult', minWidth: 120, hide: isHide },
                        ],
                    ],
                    id: 'testReload',
                    page: true,
                    parseData: function (res) {
                        return {
                            code: 0,
                            msg: '',
                            count: res.total,
                            data: res.record,
                        };
                    },
                });

                //工具栏事件
                table4.on('toolbar(test4)', function (obj) {
                    var checkStatus = table4.checkStatus(obj.config.id);
                    switch (obj.event) {
                        case 'add':
                            initDate();
                            $('.J-patrol-test').hide();
                            listenRole();
                            tableAdd({
                                addUrl: requireUrl.add,
                                layerTemp: $('.J-temple'),
                                title: '添加',
                            });
                            break;
                        case 'batchdel':
                            tableBatchDel(checkStatus, requireUrl.remove);
                            break;
                        case 'changeResult':
                            changeResult();
                            break;

                        case 'apply':
                            applyTest();
                            break;
                    }
                });

                //监听行工具事件
                table4.on('tool(test4)', function (obj) {
                    var data = obj.data;
                    console.log(data);
                    if (obj.event === 'del') {
                        layerConfirm(requireUrl.remove, {
                            id: data.id,
                        });
                    } else if (obj.event === 'edit') {
                        layerOpenInit(
                            '编辑',
                            $('.J-temple'),
                            function (index) {
                                var parmas = $('.J-add-form').serialize();
                                console.log(parmas);
                                // return;
                                ajaxRequest('post', requireUrl.edit, parmas, function (data) {
                                    data.code == 1 ? successTrip(data) : errorAlert(false, data.msg);
                                });
                            },
                            function () {
                                initDate();
                                ajaxRequest(
                                    'get',
                                    requireUrl.edit,
                                    {
                                        id: data.id,
                                    },
                                    function (res) {
                                        listenRole();
                                        form.val('formTest', res.data);
                                        // if (res.data.role == 2) {
                                        //     $('.J-invigilate').hide();
                                        // } else {
                                        //     $('.J-patrol-test').hide();
                                        // }
                                    }
                                );
                            }
                        );
                    }
                });
            });

            // 搜索重置操作
            var active = {
                reload: function () {
                    var queryParams = serializeObject($('.J-search-form'));
                    console.log(queryParams);
                    //执行重载
                    table4.reload(
                        'testReload',
                        {
                            page: {
                                curr: 1, //重新从第 1 页开始
                            },
                            where: queryParams,
                        },
                        'data'
                    );
                },
            };
            $('.J-search').on('click', function () {
                var type = $(this).data('type');
                active[type] ? active[type].call(this) : '';
            });
            $('.J-reload').on('click', function () {
                $('.J-query-params').val('');
                form.render('select');
                active.reload ? active.reload.call(this) : '';
            });
        }

        function changeResult() {
            $(".J-is-demo").hide();

            // 申请调监考
            layerOpenInit('申请调监考', $('.J-change-test'), function (index) {
                var formData = $('.J-change-form').serialize();
                formData += '&create_time=' + new Date().Format("yyyy-MM-dd hh:mm:ss");                
                ajaxRequest('post', "{:url('test/changeresult')}", formData, function (data) {
                    data.code == 1 ? successTrip(data) : errorAlert(false, data.msg);
                });
            });
        }

        function applyTest() {
            $(".J-is-apply").hide();
            $(".J-is-demo").show();
            
            // 申请调监考
            layerOpenInit('申请监考', $('.J-change-test'), function (index) {
                console.log(11111)
                var formData = $('.J-change-form').serialize();
                formData += '&create_time=' + new Date().Format('yyyy-MM-dd hh:mm:ss');
                formData += '&teacherid=14';

                ajaxRequest('post', "{:url('test/applyWacthTest')}", formData, function (data) {
                    data.code == 1 ? successTrip(data) : errorAlert(false, data.msg);
                });
            });
        }
    </script>

    {include file="my/footer"}
</div>
